<template>
    <div class="" v-if="state !== 'hidden'">

        <el-form ref="form" :model="form" :label-width="canWrite ? '115px':'auto'"
                 :class="canWrite ? 'write-form':'read-form'"
                 :label-position="'left'">

            <div class="card-wrap flex-column justify-end card-padding" >
                <el-descriptions :column="2">
                    <el-descriptions-item label="信审编号">
                        <span class="table-blue-text"
                              @click="_toPage({
                                name: 'LetterReviewDetail',
                                query: {
                                  applicationNo: form.applicationNo
                                }
                              })">{{form.applicationNo|filterNull}}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="额度申请编号">
                        <span class="table-blue-text"
                              @click="
                                    _toPage({
                                        path: '/quota/ApplyDetails',
                                        name: 'ApplyDetails',
                                        query: {
                                            calcSchemeId: form.calcSchemeId,
                                            // processId: form.processId,
                                        },
                                    })
                                ">{{form.calcSchemeCode|filterNull}}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="订单编号">
                        <span class="table-blue-text"
                              @click="
                                    _toPage({
                                        name: 'OrderDetails',
                                        query: {
                                                type: form.carType,
                                                orderId: form.orderId,
                                                calcSchemeId: form.calcSchemeId,
                                            },
                                        })
                                ">{{form.orderCode|filterNull}}</span>
                    </el-descriptions-item>
                </el-descriptions>
            </div>

            <div class="card-wrap flex-column justify-end card-padding"
                 v-for="(fitem, findex) in form.contractList" :key="findex">

                <div class="card-title-wrap">
                    <span>{{ fitem.contractTemplateTypeStr|filterNull }}</span>
                    <span></span>
                </div>

                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="是否电子签:" prop="electronicSignType">
                            <span ><dict-tag
                                :options="dict.type.order_electronic_sign_type"
                                :value="fitem.electronicSignType"/></span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="12" >
                        <el-form-item label="签署前合同:" style="width: 100%">
                            <ImageCommon :disabled="true" v-model="fitem.contractFilePrimal"></ImageCommon>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12" >
                        <el-form-item label="签署后合同:" style="width: 100%" :rules="canWrite ? {
                                         required: 2==fitem.electronicSignType,
                                         message: '请上传签署后合同',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, fitem.contractFile, callback)
                                       }:{}">
                            <ImageCommon v-if="1==fitem.electronicSignType" :limit="1" :disabled="true" v-model="fitem.contractFileServer"></ImageCommon>
                            <ImageCommon v-else :up-type="2" :limit="1" :disabled="!canWrite" v-model="fitem.contractFile"></ImageCommon>
                        </el-form-item>
                    </el-col>
                </el-row>

            </div>

        </el-form>

    </div>
</template>

<script>

import {getContractFile} from "@/api/contractTemplate/electronicContract";

export default {
    dicts: ['order_electronic_sign_type'],
    props: {
        value: {
            type: Object,
            default: () => ({}),
        },
        state: {
            default: "write",
        },
    },
    computed: {
        form: {
            get() {
                return this.value;
            },
            set(value) {
                this.$emit("input", value);
            },
        },
        canWrite() {
            return 'write' == this.state
        }
    },
    watch:{
        form:{
            immediate:true,
            deep:true,
            handler(val){
                if(this.firstEnter && val && val.orderId){
                    this.firstEnter = false
                    val.contractList = val.contractList.map(item=>{
                        if(1==item.electronicSignType){
                            this.getFileUrl(item)
                        }
                        return item
                    })
                }
            }
        }
    },
    data() {
      return {
          firstEnter:true
      }
    },
    methods: {
        async getFileUrl(item){
            try{
                let res = await getContractFile(item.contractId);
                item.contractFileServer = res.data??""
            }catch (e){
                item.contractFileServer = ""
            }
            this.$forceUpdate()
        },

        validData(rule, value, callback) {
            if(value instanceof Array && value.length<=0){
                callback(new Error(rule.message));
            }else if (rule.required && !value) {
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },
        async valid() {
            console.log('contractList===>', this.form.contractList)

            return new Promise((resolve) => {
                if ('write' == this.state) {
                    this.$refs["form"].validate(valid => {
                        resolve(valid);
                    });
                } else {
                    resolve(true)
                }
            })
        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}


.icon_add {
    margin-left: 10px;
    cursor: pointer;
}

::v-deep .read-form .el-form-item__label-wrap,
::v-deep .read-form .el-form-item__content {
    margin-left: 0 !important;
}

.task-wrap{
    margin: 15px 10%;
    padding: 20px 20px;
    box-sizing: border-box;
    border: 1px solid rgba(215, 215, 215, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;

    .task-title{
        font-size: 14px;
    }

    .el-form-item {
        margin-bottom: 0px !important;
        width: 100%;
    }
}

</style>
